<script setup>

//将发起请求的函数封装在src/api/目录下,使得代码复用性更好，但是结构会更复杂
//import {articleSearchService,articleGetAllService} from '@/api/article.js'//src目录下的文件通过@开头引用
//使用优化后的请求函数
import {articleSearchService,articleGetAllService} from './api/article_optimize.js'//src目录下的文件通过@开头引用
import {onMounted, ref} from 'vue'
//导入axios，执行npm install axios（注意C:\Users\ASUS\Desktop\BIG_EVENT\前端\big_event\整站使用Vue\learn-vue>npm install axios）
//查看node_modules会发现出现axios文件夹
import axios from 'axios'
//发送异步请求，获取所有文章数据
let articleList=ref([])//定义响应数据

 //同步获取articleGetAllService的返回结果，async,await
const getAllArticle=async function(){
    let data= await articleGetAllService()
    articleList.value=data
    console.log(data)
}
onMounted(()=>{
   getAllArticle()
})
//定义响应数据
const searchConditions=ref({
    category:'',
    state:''
})
//声明search函数
// function search(){

// }
const search=async function(){//更常用的声明方式
    let data=await articleSearchService({...searchConditions.value})
    //console.log(data)
    articleList.value=data
    //...将对象结构结构成key:value,key:value,不加{}
}
</script>
<template>
<!--html元素-->
    文章分类：<input type="text" v-model="searchConditions.category">
    文章状态：<input type="text" v-model="searchConditions.state">
    <button v-on:click="search">搜索</button>
    <table border="1 solid">
        <tr>
            <th>标题</th>
            <th>分类</th>
            <th>时间</th>
            <th>状态</th>
            <th>操作</th>
        </tr>
        <tr v-for="(article,index) in articleList">
            <td>{{ article.title }}</td>
            <td>{{ article.category }}</td>
            <td>{{ article.time }}</td>
            <td>{{ article.state }}</td>
            <td>
                <button>编辑</button>
                <button>修改</button></td>
        </tr>

    </table>
</template>